<template>
  <div class="account_search">
    <div class="profit">
      <div class="profit_item">
        <div class="title">{{languageJson.account.todayProfitLoss}}</div>
        <div class="num" :style="earningsdata.today_earnings >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">{{earningsdata.today_earnings.toFixed(2)}}</div>
      </div>
      <div class="profit_item">
        <div class="title">{{languageJson.account.yesterdayProfitLoss}}</div>
        <div class="num" :style="earningsdata.yesterday_earnings >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">{{earningsdata.yesterday_earnings.toFixed(2)}}</div>
      </div>
    </div>
    <div class="form">
      <div class="form_item" style="margin-right: 16px">
        <div class="label">{{languageJson.order.startingEndingTime}}：</div>
        <div>
          <el-date-picker
            v-model="formdata.time"
            class="datapicker_orderlist"
            type="daterange"
            :start-placeholder="languageJson.order.startTime"
            :end-placeholder="languageJson.order.endTime"
            :clearable="false"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" @change="emits('change')"
            style="width: 300px"
          >
            <template #range-separator>
              <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
            </template>
          </el-date-picker>
        </div>
      </div>
      <div class="form_item">
        <el-input class="search_input" v-model="formdata.search" style="width: 200px" :placeholder="languageJson.account.search" @change="emits('change')">
          <template #prefix>
            <img
              src="@/assets/account/search.png"
              style="width: 20px; height: 20px; margin-right: 6px"
              alt=""
            />
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
    formdata: Object,
    earningsdata: Object
})
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const emits = defineEmits(['change'])

</script>

<style lang="scss" scoped>
.account_search {
  height: 56px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.profit {
  margin-right: 146px;
  display: flex;

  .profit_item {
    width: 160px;
    height: 56px;
    background-color: rgba(254, 172, 46, 0.1);
    margin-right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      font-family: AlibabaPuHuiTi_2_55_;
      font-size: 12px;
      color: #666;
      height: 16px;
      line-height: 16px;
    }

    .num {
      //   font-family: DINAlternate;
      font-size: 16px;
      font-weight: bold;
      color: #ff5f58;
      height: 24px;
      line-height: 24px;
    }
  }
}

.form {
  display: flex;
  align-items: flex-end;

  .form_item {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      height: 32px;
      line-height: 32px;
      font-family: AlibabaPuHuiTi_2_55_;
      font-size: 14px;
      text-align: right;
      color: #000;
    }
  }
}
</style>

<style>
.datapicker_orderlist {
  border-radius: 0;
  background-color: #f3f5fd;
  height: 32px;
}
.datapicker_orderlist .el-range__close-icon,
.datapicker_orderlist .el-range__icon {
  display: none;
}
.datapicker_orderlist::before {
  content: '';
  position: absolute;
  background-image: url('@/assets/order/calendar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  right: 8px;
  width: 16px;
  height: 16px;
}
.datapicker_orderlist .el-range-input:first-of-type {
  margin-left: -20px !important;
}
.datapicker_orderlist input {
  text-align: left !important;
  height: 32px !important;
  line-height: 32px !important;
  font-family: AlibabaPuHuiTi_2_55_ !important;
  font-size: 14px !important;
  color: #000 !important;
}

.search_input .el-input__wrapper {
  border-radius: 0;
  background-color: #f3f5fd;
  padding: 0 6px;
  height: 32px;
  line-height: 32px;
}
</style>